<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>日期时间微调器之格式化 - jQuery EasyUI 演示</title>
	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
	<link rel="stylesheet" type="text/css" href="../demo.css">
	<script type="text/javascript" src="../../jquery.min.js"></script>
	<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
	<script type="text/javascript" src="../../locale/easyui-lang-zh_CN.js"></script>
</head>
<body>
	<h2 title="Format DateTimeSpinner">日期时间微调器之格式化</h2>
	<p title="The DataTimeSpinner value can be formatted by specifying the 'formatter' and 'parser' functions.">　　日期时间微调器的值可通过指定『formatter』和『parser』这俩函数来格式化。</p>
	<div class="easyui-panel" style="width:100%;max-width:300px;padding:10px 20px;">
		<div style="margin-bottom:10px">
			<input class="easyui-datetimespinner" value="2015-06-24 17:23" label="yyyy-mm-dd hh:mm" labelPosition="top" style="width:100%;">
		</div>
		<div style="margin-bottom:10px">
			<input class="easyui-datetimespinner" value="2015-06-24" data-options="label:'yyyy-mm-dd',labelPosition:'top',formatter:formatter1,parser:parser1" style="width:100%;">
		</div>
		<div style="margin-bottom:0px">
			<input class="easyui-datetimespinner" value="01月/2018" data-options="label:'mm月/yyyy',labelPosition:'top',formatter:formatter2,parser:parser2,selections:[[0,2],[4,8]]" style="width:100%;">
		</div>
	</div>
	<script type="text/javascript">
		function formatter1(date){
			if (!date){return '';}
			return $.fn.datebox.defaults.formatter.call(this, date);
		}
		function parser1(s){
			if (!s){return null;}
			return $.fn.datebox.defaults.parser.call(this, s);
		}
		function formatter2(date){
			if (!date){return '';}
			var y=date.getFullYear(), m=date.getMonth()+1;
			return (m<10?('0'+m):m)+'月/'+y; //return y + '-' + (m<10?('0'+m):m);
		}
		function parser2(s){
			if (!s){return null;}
			var ss=s.split('月/'), m=parseInt(ss[0],10), y=parseInt(ss[1],10);
			if(!isNaN(y) && !isNaN(m)){return new Date(y,m-1,1);} else{return new Date();}
		}
	</script>
</body>
</html>